<template>
	<div id="spellorder_detail">
		<v-header>
			<price-header></price-header>
		</v-header>
		<v-content class="width-1200">
			<div class="detail_title">
				拼单详情
			</div>
			<div class="detail_part my-flex-between">
				<div class="part_left">
					<div class="top my-flex-left">
						<span class="product">汽油 92#</span>
						<span class="ptype my-flex-center">跟跌不跟涨</span>
					</div>
					<div class="center my-flex-around">
						<div class="parts my-flex-col-center">
							<div class="price">
								<span class="number">1000</span><span clss="unit">元/吨</span>
							</div>
							<div class="price_desc">
								挂牌价
							</div>
						</div>
						<div class="parts my-flex-col-center">
							<div class="price">
								<span class="number">1000</span><span clss="unit">元/吨</span>
							</div>
							<div class="price_desc">
								拼单总量
							</div>
						</div>
						<div class="parts my-flex-col-center">
							<div class="price">
								<span class="number">40</span><span clss="unit">天</span>
							</div>
							<div class="price_desc">
								剩余时长
							</div>
						</div>
						<div class="parts my-flex-col-center">
							<div class="price">
								<span class="number red_part">1000</span><span clss="unit">吨</span>
							</div>
							<div class="price_desc">
								剩余数量
							</div>
						</div>
					</div>
					<div class="bottom my-flex-left">
						<div class="bottom_info">
							<div class="info_">
								<span class="name">最小拼单数量：</span>
								<span class="value">10吨</span>
							</div>
							<div class="info_">
								<span class="name">发布时间：</span>
								<span class="value">2019-04-09 10:00</span>
							</div>
							<div class="info_">
								<span class="name">炼厂名称：</span>
								<span class="value">东明石化</span>
							</div>
						</div>
						<div class="bottom_info">
							<div class="info_">
								<span class="name">最长提货周期：</span>
								<span class="value">30天</span>
							</div>
							<div class="info_">
								<span class="name">到期时间：</span>
								<span class="value">2019-5-09 10:00</span>
							</div>
							<div class="info_">
								<span class="name">提货地址：</span>
								<span class="value">山东省济宁市任城区11号</span>
							</div>
						</div>
					</div>
					
				</div>
				<div class="part_right">
					<div class="first_part my-flex-left">
						<img src="../../assets/price/1.png"/>
						<div class="company_info">
							<div class="name one-line">中软云石化有限公司中软云石化有限公司</div>
							<div class="certificate my-flex-center">
								已认证
							</div>
						</div>
					</div>
					<div class="center_part">
						<span>可拼单数量：</span>
						<span><span class="detail_num">20</span><span class="unit">吨</span></span>
					</div>
					<div class="order_num my-flex-left">
						<div class="desc">
							拼单数量
						</div>
						<div class="input_num my-flex-left">
							<input type="number" placeholder="不限" />
							<span class="my-flex-center">吨</span>
						</div>
					</div>
					<div class="all">
						<span>输入全部</span>
					</div>
					<div class="pindan my-flex-center my-btn">
						立即拼单
					</div>
					<div class="agree">
						<label  class="checkbox-label my-flex-between">
							<div class="my-checkbox">
								<input type="checkbox" />
								<img src="../../assets/tick.png" alt="" />
								
							</div>						
							<span >我已签署拼单合同，如未签署请<span class="base-color" @click.stop="test">签署合同</span></span>
						</label>
						
					</div>
				</div>
			</div>
			<!--拼单详情-->
			<div class="pindan_content">
				<div class="title"><span>拼单详情</span></div>
				<div class="content">
					拼单详情拼单详情拼单详情拼单详情
				</div>
			</div>
			
			
		</v-content>
		
	</div>
</template>

<script>
	export default{
		methods:{
			test(){
				console.log(11)
			}
		}
	}
</script>

<style lang="less" src="../../less/page/spellorder/index.less"></style>